<template>
  <div class="bookContentDetail">
    <div class="container">
      <div class="bookDetail">
        <div class="header">
          <img :src="`http://statics.zhuishushenqi.com${bookInfo.cover}`"
               alt=""
               width="72px"
               height="96px">
          <div class="middle">
            <div><span>{{bookInfo.title}}</span><span v-if="bookInfo.allowMonthly">连载</span><span v-else>完结</span></div>
            <div><span>{{bookInfo.minorCate}}</span><span>{{bookInfo.retentionRatio*10000}}</span></div>
          </div>
          <div class="species"> <span>{{bookInfo.majorCate}}</span></div>
        </div>
        <div class="button">
          <button>加入书架</button>
          <button @click="enterRead(bookInfo._id)">开始阅读</button>
        </div>
      </div>
    </div>
    <div class="intro"></div>
  </div>
</template>

<script>

export default {
  name: 'bookContentDetail',
  props: {
    bookInfo: Object,
    bookChapter: Array,
  },
  data () {
    return {


    };
  },
  created () {
    console.log(this.bookInfo)
    console.log(this.bookChapter);
  },

  components: {},

  computed: {},

  beforeMount () { },

  mounted () { },

  methods: {
    enterRead () {
      this.$router.push({
        name: 'readBook',
        query: {
          _id: this.bookInfo._id,
          title: this.bookInfo.title,
          infoId: this.bookChapter[0]._id,
        }
      })

    }
  },

  watch: {}

}

</script>
<style  lang="less">
.bookContentDetail {
  background: #fff;
  .container {
    width: 100%;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ccc;
    .bookDetail {
      width: 90%;
      height: 200px;
      .header {
        display: flex;
        width: 100%;
        height: 96px;
        img {
          flex: 0 0 72px;
          height: 96px;
        }
        .middle {
          flex: 1;
          div {
            &:nth-child(1) {
              width: 100%;
              height: 28px;
              overflow: hidden;
              span {
                &:nth-child(1) {
                  float: left;
                  height: 20px;
                  line-height: 20px;
                  width: 80px;
                  font-size: 16px;
                  text-indent: 1em;
                }
                &:nth-child(2) {
                  float: left;
                  height: 20px;
                  line-height: 20px;
                  width: 30px;
                  background: #b83320;
                  color: #fff;
                  font-size: 14px;
                }
              }
            }
            &:nth-child(2) {
              width: 100%;
              height: 28px;
              overflow: hidden;
              span {
                &:nth-child(1) {
                  float: left;
                  height: 20px;
                  line-height: 20px;
                  width: 80px;
                  font-size: 14px;
                  text-indent: 1em;
                }
                &:nth-child(2) {
                  float: left;
                  height: 20px;
                  line-height: 20px;
                  width: 30px;
                  font-size: 13px;
                }
              }
            }
          }
        }
        .species {
          flex: 0 0 40px;
          position: relative;
          span {
            &:nth-child(1) {
              position: absolute;
              width: 32px;
              border: 1px solid #f00;
              height: 18px;
              line-height: 18px;
              font-size: 14px;
              text-align: center;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
      .button {
        margin-top: 15px;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        button {
          &:nth-child(1) {
            outline: none;
            border: none;
            width: 148px;
            height: 50px;
            line-height: 50px;
            background: #fff;
            text-align: center;
            border-radius: 2px;
            color: #b83320;
            border: 1px solid #f00;
          }
          &:nth-child(2) {
            outline: none;
            border: none;
            width: 150px;
            height: 50px;
            background: #b83320;
            border-radius: 2px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            border: 1px solid #f00;
          }
        }
      }
    }
  }
}
</style>